<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0" />
    <title>css实现瀑布流(兼容性问题)</title>
    <meta
      name="keywords"
      content="demo,js,css,masonry" />
    <style>
      .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 10px;
        grid-template-rows: masonry;
        height: 100vh;
        background-color: #eee;
      }
      .item {
        background-color: red;
        counter-increment: item;
        text-align: center;
      }

      .item::after {
        content: counter(item);
        font-size: 4rem;
      }

      .h-1 {
        height: 5rem;
      }
      .h-2 {
        height: 10rem;
      }
      .h-3 {
        height: 15rem;
      }
      .h-4 {
        height: 20rem;
      }
      .h-5 {
        height: 25rem;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="item h-5"></div>
      <div class="item h-1"></div>
      <div class="item h-2"></div>
      <div class="item h-2"></div>
      <div class="item h-4"></div>
      <div class="item h-3"></div>
      <div class="item h-4"></div>
      <div class="item h-3"></div>
      <div class="item h-5"></div>
      <div class="item h-1"></div>
      <div class="item h-2"></div>
      <div class="item h-2"></div>
      <div class="item h-4"></div>
      <div class="item h-3"></div>
      <div class="item h-4"></div>
    </div>
  </body>
</html>
